<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/main.css">


    <script src="/js/jquery-2.1.4.min.js"></script>


    <!--富文本编辑器-->

    <!-- Main Quill library -->
    <!--<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.css" rel="stylesheet">-->

    <!--<script src="https://cdn.bootcss.com/highlight.js/9.14.2/highlight.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.js"></script>-->

    <link href="/plugins/quill/quill.bubble.css" rel="stylesheet">
    <link href="/plugins/quill/quill.core.css" rel="stylesheet">
    <link href="/plugins/quill/quill.snow.css" rel="stylesheet">

    <script src="/plugins/quill/highlight.min.js"></script>
    <script src="/plugins/quill/quill.core.js"></script>
    <script src="/plugins/quill/quill.js"></script>



    <link rel="stylesheet" href="/css/commonNav.css">

    <style>
        .lay-blog .container {
            width: 960px;
            margin: 0 auto;
        }

        #relateArticles li {
            font-size: 14px;
        }
    </style>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        .downpanel .layui-select-title span {
            line-height: 38px;
        }

        /*继承父类颜色*/
        .downpanel dl dd:hover {
            background-color: inherit;
        }
    </style>
    <style type="text/css">
        body {
            height: 100%;
            width: 100%;
            background-size: cover;
            margin: 0 auto;
        }

        td {
            font-size: 12px !important;
        }

        .layui-form-checkbox span {
            height: 30px;
        }

        .layui-field-title {
            border-top: 1px solid white;
        }

        table {
            width: 100% !important;
        }

        .title-left {
            padding: 15px 0 20px 20px;
            background-color: white;
            /*padding: 40px 0px 30px;*/
            margin-bottom: 10px;
            border-radius: 5px;
            margin-right: 10px;
        }

        #article_form {
            /*margin-left: -40px;*/

        }

        /*.title-label{*/
        /*width:50px;*/
        /*}*/
        /* 左右布局 */
        .my-label {
            /*width: 100px;*/
        }

        /*.main {*/
            /*display: flex;*/
            /*flex-direction: row;*/
        /*}*/

        /*.right-content {*/
            /*width: 100%;*/
            /*margin-left: 10px;*/
            /*padding-left: 20px;*/
            /*display: flex;*/
            /*display: flex;*/
            /*flex-direction: column;*/
        /*}*/

        /*ul.left-nav li {*/
            /*border-left-color: #23b8ff;*/
        /*}*/

        /*ul.left-nav li:hover {*/
            /*background-color: rgba(100, 100, 100, 0.3) !important;*/
        /*}*/

        /*ul.left-nav li.active {*/
            /*background-color: #eaeaea;*/
            /*border-left: 5px solid;*/
            /*border-left-color: #23b8ff;*/
        /*}*/

        /*ul.left-nav a {*/
            /*color: black !important;*/
        /*}*/

        /*ul.left-nav a:hover {*/
            /*color: #23b8ff !important;*/
        /*}*/

        /*.icon-cursor:hover {*/
            /*cursor: pointer;*/
        /*}*/

        /* 表单样式 */
        .outline-form {
            background-color: white;
            padding: 25px 100px;
            margin-bottom: 30px;
        }

    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>

<div class="container-wrap" style="">
    <div class="container" style="width: 1080px;">
        <div class="main">
            <div class="left-nav left-container">
                <ul class="layui-nav layui-nav-tree left-nav" style="background-color: white;color: black;"
                    lay-filter="test">
                    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                    <li class="layui-nav-item active">
                        <a href="javascript:;">图文发布</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="/teacher/article/addVideo.html">视频发布</a>
                    </li>
                </ul>
            </div>
            <div class="right-content">
                <div class="outline-form">
                    <form class="layui-form" id="article_form" lay-filter="article_form" style="font-size: 16px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label my-label" style="">选择年级</label>
                            <div class="layui-input-block" id="grade">
                                <select name="grade" lay-verify="required" lay-filter="grade">
                                    <option value="" class="expected"></option>
                                    <option v-for="g in grade" :value="g.id">{{g.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form" lay-filter="course">
                            <label class="layui-form-label my-label">选择课程</label>
                            <div class="layui-input-block" id="course">
                                <select name="courseId" lay-verify="required" lay-search lay-filter="course">
                                    <option value="" class="expected"></option>
                                    <!--<option v-for="c in courses" :value="c.id">{{c.name}}</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form" lay-filter="outline">
                            <label class="layui-form-label my-label">选择大纲</label>
                            <div class="layui-input-block" id="outline">
                                <select name="outline" lay-verify="required" lay-filter="outline">
                                    <option value="" class="expected"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-lable my-label">选择知识点</label>
                            <div class="layui-input-block">
                                <div style="margin-top: -20px;margin-bottom: 18px">{{selectedOutlineDetail.name}}
                                    <span><i class="layui-icon" id="outlineDetailLoad"
                                             style="font-size: 28px; display: none;">&#xe63d;</i></span>
                                </div>
                                <ul id="outline_tree"></ul>
                            </div>

                        </div>
                        <div class="layui-form-item" style="font-size: 16px;">
                            <label class="layui-form-label my-label">标题</label>
                            <div class="layui-input-block" style="">
                                <input type="text" name="title" id="title" required lay-verify="required"
                                       placeholder="请输入标题"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </form>

                </div>
                <div id="standalone-container" style="background-color: rgba(100,100,100,0.1)">
                    <div id="toolbar-container">
                        <span class="ql-formats">
                            <select class="ql-font"></select>
                            <select class="ql-size"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-color"></select>
                            <select class="ql-background"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-script" value="sub"></button>
                            <button class="ql-script" value="super"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-header" value="1"></button>
                            <button class="ql-header" value="2"></button>
                            <button class="ql-blockquote"></button>
                            <button class="ql-code-block"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-list" value="ordered"></button>
                            <button class="ql-list" value="bullet"></button>
                            <button class="ql-indent" value="-1"></button>
                            <button class="ql-indent" value="+1"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-direction" value="rtl"></button>
                            <select class="ql-align"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-link"></button>
                            <button class="ql-image"></button>
                            <button class="ql-video"></button>
                            <button class="ql-formula"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-clean"></button>
                        </span>
                    </div>
                    <div id="editor" style="background-color: white; height: 500px;">
                        <p>Hello World!</p>
                        <p>Some initial <strong>bold</strong> text</p>
                        <p><br></p>
                    </div>
                    <div class="" style="padding: 5px 0px 5px 50px;">
                        <button class="layui-btn" lay-submit lay-filter="article_submit" id="submit_article">保存</button>
                        <!--<button class="layui-btn layui-btn-primary" onclick="">预览</button>-->
                    </div>
                </div>
            </div>
            
            <div style="clear: both;"></div>
        </div>

        <!--<div class="layui-col-md5">-->
        <!--<div style="background-color: white;padding: 10px;height: 100%;">-->
        <!--<span style="font-size: 18px;">相关文章</span>-->
        <!--<div class="layui-collapse" lay-accordion>-->
        <!--<div class="layui-colla-item">-->
        <!--<h2 class="layui-colla-title">杜甫</h2>-->
        <!--<div class="layui-colla-content layui-show" style="font-size: 16px;">内容区域</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!-- Create the editor container -->


        <!-- Initialize Quill editor -->
        <script>

            var quill = new Quill('#editor', {
                modules: {
                    syntax: true,
                    toolbar: '#toolbar-container'
                },
                theme: 'snow'
            });

            function preview() {
                var url = "/teacher/article/preview"
            }

        </script>
    </div>
</div>
<div th:include="/teacher/templates::footer"></div>
</body>
<script src="/vue/vue.js"></script>
<script src="/js/teacher/article/add.js"></script>
</html>